<template>
  <div v-title :data-title="placename">
      <main>
        <ul>
            <li class="game-item">
                <a :href="'https://mp.yile.vip/qrcode.htm?qrcodeid='+qrcodeid+'&gameid=1004'">
                    <div class="mask"></div>
                </a>
            </li>
            <li class="game-item no-start"></li>
            <li class="game-item no-start"></li>
        </ul>
        <div class="QRcode" v-if="isSubscribe" @click="codeShow=true">
        </div>
        <div class="model">
            <div class="qrcode" v-if="codeShow">
                <div class="mask"></div>
                <div class="close" @click="codeShow=false">X</div>
                <div class="code">
                    <img src="https://i.yile.vip/b/Y78ip0a83f3172793923_XULiRP.jpg" alt="">
                </div>
            </div>
        </div>
    </main>
    <nav-bar this-router='home'></nav-bar>
  </div>
</template>

<script>
import navBar from "../components/navBar";
export default {
  name: 'Home',
  components:{navBar},
  data(){
      return {
          isSubscribe:true,
          qrcodeid:'',
          placeid:'',
          codeShow:false
      }
  },
  mounted() {
      let self = this;
      self.placeid=self.yl.GetQueryString('placeid');
      console.log(self.placeid)
      self.yl.get({
          url:'/mp/home_api/get.json',
          data:{placeid:self.placeid},
          success:function(res){
              if(res.result=='success'){
                  self.$store.commit('setPlaceName',res.data.placename);
                  self.$store.commit('setUser',{isSubscribe:res.data.isSubscribe});
                  document.title=res.data.placename?res.data.placename:'乐喝乐喝';
              }
          }
      })
      self.qrcodeid=self.yl.GetQueryString('qrcodeid');
  },
  computed:{
      placename(){
          return this.$store.state.placename;
      }
  }
}
</script>

<style scoped>
main{
    height: 100vh;
    overflow: hidden;
    background:#281047;
    padding: .7rem .28rem 0 .28rem;
    position: relative;
}

main .game-item{
    height: 2.64rem;
    margin-top: .24rem;
    position: relative;
    z-index: 1000;
}
main .game-item a{
    display: inline-block;
    height: 100%;
    width: 100%;
}
main .game-item:nth-child(1){
    background: url('https://i.yile.vip/c/Y78h72fa2l1518093805_KzbzaC.png') 0 0 no-repeat;
    background-size: 100% 100%;
}
main .game-item:nth-child(2){
    background: url('https://i.yile.vip/b/Y78kodnpj01050049526_olSQuU.png') 0 0 no-repeat;
    background-size: 100% 100%;
}
main .game-item:nth-child(3){
    background: url('https://i.yile.vip/d/Y78koe89ac841873473_zNbhfS.png') 0 0 no-repeat;
    background-size: 100% 100%;
}

main .game-item.no-start:after{
    content: ' ';
    display: inline-block;
    position: absolute;
    width: 1.77rem;
    height: .76rem;
    right: -.06rem;
    top: .24rem;
    background: url('https://i.yile.vip/a/Y78h73e0eo490881669_izDwEf.png') 0 0 no-repeat;
    background-size: 100% 100%;
}
/* main .game-item.no-start:before{
    content: ' ';
    display: inline-block;
    background-color:#000;
    position: relative;
    opacity: 0.7;
    width: 100%;
    height: 100%; 
    border-radius: .1rem;
}   */

main .QRcode{
    position: absolute;
    bottom: 2.1rem;
    right: .1rem;
    z-index: 2000;
    width: .8rem;
    height: .78rem;
    background: url('https://i.yile.vip/d/Y78h79e6272699839311_UURNmV.png') 0 0 no-repeat;
    background-size: 100% 100%;
}

main .model .qrcode{
    position: absolute;
    height: 100vh;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
}
main .model .qrcode .mask{
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    position: absolute;
    z-index: 1000;
}
main .model .qrcode .code{
    margin-top: 2.5rem;
    text-align: center;
    position: absolute;
    z-index: 2000;
    width: 100%;
}
main .model .qrcode .code img{
    width: 80%;
}
main .model .qrcode .close{
    position: absolute;
    color: #fff;
    z-index: 2000;
    font-weight: bolder;
    top: 1.9rem;
    right: .8rem;
    width: 1.5em;
    height: 1.5em;
    font-size: .3rem;
    border: 1px solid #fff;
    text-align: center;
    border-radius: 50%;
}
</style>
